<div id="main-content">
    <div id="page-function">
        <ul>
            <button class="layui-btn">提交</button>
            <button class="layui-btn">取消提交</button>
            <!--<div class="clear"></div>-->
        </ul>
        <ul id="tms-wbm-fun">
            <li>跳转 <i class="layui-icon">&#xe61a;</i></li>
            <li>打印 <i class="layui-icon">&#xe61a;</i></li>
            <li>更多 <i class="layui-icon">&#xe61a;</i></li>
            <div class="clear"></div>
            <div class=" tms-wbm-same tms-wbm-tip0">
                    <p>运输任务</p>
                    <p>回单管理</p>
            </div>
            <div class=" tms-wbm-same tms-wbm-tip1">
                    <p>人送运单</p>
                    <p>零公里运单</p>
                    <p>临&nbsp;&nbsp;&nbsp;&nbsp;牌</p>
            </div>
            <div class=" tms-wbm-same tms-wbm-tip2">
                    <p class="site-demo-button" style="margin-bottom: 0;">
                        <i data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">新增</i>
                    </p>

                    <p>复制</p>
                    <p>修改</p>
                    <p>暂运</p>
                    <p>取消暂运</p>
            </div>
        </ul>
        <div id="fun-right">
            <button class="layui-btn" style="margin-right: 15px;">查询</button>
            <i id="tms-wbm-refresh" class="iconfont" style="font-size: 26px;">&#xe61a;</i>
        </div>
    </div>

    <table class="layui-table">
        <tr>
            <th> <input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
            <th>系统订单号</th>
            <th>客户订单号</th>
            <th>客户订单号</th>
            <th>中联运单号</th>
            <th>优先级</th>
            <th>起运省市区</th>
            <th>起运地址</th>
            <th>目的省市区</th>
            <th>目的地址</th>
            <th>运单状态</th>
            <th>客户</th>
            <th>运输模式</th>
            <th>货物类型</th>
            <th>创建时间</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="" lay-skin="primary"></td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

    <!--分页-->
    <div style="width:60%; margin:20px auto; padding:5px;" id="demo7"></div>

    <!--查看详细信息-->
    <div class="layui-form"></div>
    <table class="layui-table">
        <tr>
            <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
            <th>系统订单号</th>
            <th>品牌</th>
            <th>车系</th>
            <th>车型</th>
            <th>车架号</th>
            <th>数量</th>
            <th>单位</th><th>长</th><th>宽</th><th>高</th><th>创建时间</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="" lay-skin="primary"></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>3</td>
            <td>32</td>
            <td>3</td>
            <td>3</td>
            <td>23</td>
            <td>23</td>
            <td>23</td>
            <td>23</td>
        </tr>
    </table>
    <style>

    </style>
    <!--<style>-->
        <!--*{-->
            <!--margin: 0;-->
            <!--padding: 0;-->
            <!--font-family: "微软雅黑";-->
        <!--}-->
        <!--body{-->
            <!--background-color: #f9fcfe;-->
            <!--height: 100%;-->
            <!--overflow:hidden;-->
            <!--z-index:1;-->
            <!--position: relative;-->
        <!--}-->
        <!--ul,li{-->
            <!--list-style-type: none;-->
        <!--}-->
        <!--#main{-->
            <!--/*width: 1200px;*/-->
            <!--height: 1200px;-->
            <!--/*display:flex;*/-->
            <!--/*border: 1px solid #000;*/-->
            <!--/*margin: 0px auto;*/-->
        <!--}-->
        <!--#flex-box{-->
            <!--display:flex;-->
            <!--height: 100%;-->
        <!--}-->
        <!--#head{-->
            <!--width: 100%;-->
            <!--min-width: 1200px;-->
            <!--height: 80px;-->

            <!--background-color:#0f2341;-->
            <!--position: relative;-->
        <!--}-->
        <!--#logo{-->
            <!--position: absolute;-->
            <!--top:20px;-->
            <!--left:28px;-->
        <!--}-->
        <!--#nav-ul{-->
            <!--position: absolute;-->
            <!--top:25px;-->
            <!--left:220px;-->
        <!--}-->
        <!--#nav-ul .nav-ul-other{-->
            <!--margin-left: 10px;-->
            <!--margin-right: 10px;-->
        <!--}-->
        <!--#nav-ul li{-->
            <!--list-style-type: none;-->
            <!--float: left;-->
            <!--color:#ffffff;-->
            <!--display: inline-block;-->
            <!--/*border-right: 1px solid #fff;*/-->
            <!--text-align: center;-->
            <!--width: 66px;-->
            <!--height: 20px;-->
            <!--top:5px;-->
            <!--/*left:-5px;*/-->
            <!--position: relative;-->

        <!--}-->
        <!--#nav-ul li:hover,#admin:hover{-->
            <!--cursor:pointer;-->
        <!--}-->
        <!--#admin{-->
            <!--font-size: 14px;-->
            <!--color: #fff;-->
            <!--float: right;-->
            <!--position: absolute;-->
            <!--top: 30px;-->
            <!--right: 16px;-->
        <!--}-->
        <!--#aside{-->
            <!--min-width:220px;-->
            <!--/*border: 1px solid #000;*/-->
            <!--height: 100%;-->
            <!--position: relative;-->
            <!--background-color: #f4f8f9;-->
            <!--float:left;-->
        <!--}-->
        <!--#aside:hover{-->
            <!--background-color: #e9f1f3;-->
        <!--}-->
        <!--#aside input{-->
            <!--border-radius: 4px;-->
            <!--width: 156px;-->
            <!--height: 17px;-->
            <!--margin: 8px 0 10px 25px;-->
            <!--border: 1px solid #000;-->
            <!--padding: 1px;-->
            <!--padding-left: 5px;-->
            <!--font-size: 11px;-->
        <!--}-->
        <!--#search-img{-->
            <!--background-image: url(../image/icon_leftmenu_search.png);-->
            <!--position: absolute;-->
            <!--display: inline-block;-->
            <!--width: 16px;-->
            <!--height: 16px;-->
            <!--top: 11px;-->
            <!--right: 37px;-->
        <!--}-->
        <!--#search-img:hover{-->
            <!--cursor:pointer;-->
        <!--}-->
        <!--#aside-content{-->
            <!--padding-left: 36px;-->
            <!--position: relative;-->
        <!--}-->
        <!--#aside-content span{-->
            <!--font-size: 14px;-->
        <!--}-->
        <!--#aside-content li{-->
            <!--/*display: inline-block;*/-->
            <!--margin:10px 0 0 0;-->
        <!--}-->
        <!--#aside-content i{-->
            <!--position: relative;-->
            <!--right:8px;-->
        <!--}-->
        <!--#aside-content i:hover{-->
            <!--cursor:pointer;-->
        <!--}-->
        <!--.clear{-->
            <!--clear:both;-->
        <!--}-->
        <!--/*这下面事运输界面的样式*/-->

        <!--/*.small1{*/-->
        <!--/*font-size: 10px !important;*/-->
        <!--/*transform:rotate(90deg);*/-->
        <!--/*-ms-transform:rotate(90deg); 	!* IE 9 *!*/-->
        <!--/*-moz-transform:rotate(90deg); 	!* Firefox *!*/-->
        <!--/*-webkit-transform:rotate(90deg) !important; !* Safari 和 Chrome *!*/-->
        <!--/*-o-transform:rotate(90deg);*/-->
        <!--/*}*/-->

        <!--#main-content{-->
            <!--flex:1;-->
            <!--min-width: 1200px;-->
            <!--/*float:right;*/-->
        <!--}-->
        <!--#main-content table{-->
            <!--width: 100%;-->
            <!--font-size: 14px;-->
            <!--text-align:center;-->
            <!--/*font-weight:bold;*/-->
        <!--}-->
        <!--#operating{-->
            <!--width: 32px;-->
        <!--}-->
        <!--#page-list{-->
            <!--/*width: 1030px;*/-->
            <!--border-bottom: 1px solid #cedce2;-->
            <!--padding:10px 0 0 10px;-->
            <!--font-size: 14px;-->
            <!--margin-bottom: 10px;-->
        <!--}-->
        <!--#page-function{-->
            <!--position: relative;-->
        <!--}-->
        <!--#page-function li{-->
            <!--float: left;-->
            <!--display: inline-block;-->
            <!--width: 72px;-->
            <!--height: 26px;-->
            <!--border-radius:5px;-->
            <!--/*background-color: #de531a;*/-->
            <!--color:#fff;-->
            <!--font-size: 14px;-->
            <!--text-align: center;-->
            <!--margin:0 10px 2px 10px;-->
            <!--line-height:26px;-->
            <!--margin-bottom: 10px;-->
        <!--}-->

        <!--/*跳转功能框*/-->
        <!--#page-function span{-->
            <!--font-size: 14px;-->
            <!--/*border: 1px solid #000;*/-->
            <!--margin-right: 10px;-->
            <!--display: inline-block;-->
            <!--width: 80px;-->
            <!--text-align: center;-->
        <!--}-->
        <!--.small{-->
            <!--display: inline-block;-->
            <!--width: 16px;-->
            <!--height: 16px;-->
            <!--background-image: url(../image/down.png);-->
            <!--position: relative;-->
            <!--top:3px;-->
            <!--margin-right: 3px;-->
        <!--}-->

        <!--#bill-search{-->
            <!--display: inline-block;-->
            <!--width: 72px;-->
            <!--height: 36px;-->
            <!--float: right;-->
            <!--position: relative;-->
            <!--line-height: 36px;-->
            <!--text-align: center;-->
            <!--background-color: #de531a;-->
            <!--color: #fff;-->
            <!--right: 62px;-->
            <!--top: -5px;-->
            <!--border-radius: 5px;-->
        <!--}-->
        <!--.icf-big-refresh{-->
            <!--float: right;-->
            <!--font-size: 28px !important;-->
            <!--position: relative;-->
            <!--top: -4px;-->
            <!--right: -65px;-->
        <!--}-->
        <!--#page-function li:hover,.icf-big-refresh:hover,#bill-search:hover{-->
            <!--cursor:pointer;-->
        <!--}-->
        <!--#home-page{-->
            <!--display: inline-block;-->
            <!--padding: 0 25px;-->
            <!--border: 1px solid #cedce2;-->
            <!--margin-right:4px;-->
            <!--color:#666666;-->
        <!--}-->
        <!--table,tr,td,th{-->
            <!--border: 1px solid #cedce2;-->
            <!--border-collapse: collapse;-->
            <!--padding: 5px;-->
            <!--text-align:center;-->
        <!--}-->
        <!--/*分页的距离*/-->
        <!--#clipDIV ul{-->
            <!--width:1200px;-->
            <!--margin:0 auto;-->
        <!--}-->
        <!--.tips{-->
            <!--position: absolute;-->
            <!--width: 269px;-->
            <!--height: 100px;-->
            <!--z-index: 99;-->
            <!--background-color: #e6e6e6;-->
            <!--top: 20px;-->
            <!--left: 235px;-->
            <!--display: none;-->
        <!--}-->
        <!--.tipsActive{-->
            <!--background-color: #e6e6e6;-->
        <!--}-->
    <!--</style>-->
</div>